<!--
 * @Author: hq
 * @Date: 2022-05-27 14:18:02
 * @LastEditors: hq
 * @LastEditTime: 2022-06-16 16:21:08
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div v-loading="loading">
    <div class="row">
      <div class="col">
        <div>用户id：</div>
        <div>{{ row.uid }}</div>
      </div>
      <div class="col">
        <div>订单号：</div>
        <div>{{ row.oid }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>提现金额：</div>
        <div>{{ row.money }}</div>
      </div>
      <div class="col">
        <div>手续费：</div>
        <div>{{ row.fee }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>到账金额：</div>
        <div>{{ row.arrive }}</div>
      </div>
      <div class="col">
        <div>备注：</div>
        <div>{{ row.remark }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>状态：</div>
        <div>{{ row.status_text }}</div>
      </div>
      <div class="col">
        <div>提现卡编号：</div>
        <div>{{ row.token_no }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>真实姓名：</div>
        <div>{{ row.real_name }}</div>
      </div>
      <div class="col">
        <div>银行：</div>
        <div>{{ row.bank_name }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>银行卡号：</div>
        <div>{{ row.bank_number }}</div>
      </div>
      <div class="col">
        <div>开户行：</div>
        <div>{{ row.bank_sub_name }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>银行手机号：</div>
        <div>{{ row.phone }}</div>
      </div>
      <!-- <div class="col">
        <div>提交时间：</div>
        <div>{{ row.create_time }}</div>
      </div> -->
    </div>
    <div class="row">
      <div class="col">
        <div>审核时间：</div>
        <div>{{ row.judge_time }}</div>
      </div>
      <div class="col">
        <div>提交时间：</div>
        <div>{{ row.create_time }}</div>
      </div>
    </div>
    <div class="row" v-if="row.token_no === ''">
      <div class="col">
        <div><span>*</span>选择省市区：</div>
        <el-cascader
          v-model="positionId"
          :props="optionProps"
          :options="options"
        ></el-cascader>
      </div>
    </div>
    <div class="row" v-if="row.token_no === ''">
      <div class="col">
        <el-button type="primary" @click="handleSubmit">绑定汇付信息</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCity } from "@/api/index";
import { cashoutDetail, bandhfInfo } from "@/api/money";
export default {
  props: ["rowData"],
  data() {
    return {
      loading: false,
      row: {},
      url: "",
      positionId: [],
      optionProps: {
        value: "area_code",
        label: "name",
        children: "child",
      },
      options: [
        {
          value: 1,
          label: "指南",
          children: [
            {
              value: 2,
              label: "设计原则",
            },
            {
              value: 3,
              label: "导航",
            },
          ],
        },
        {
          value: 4,
          label: "组件",
          children: [
            {
              value: 5,
              label: "Basic",
            },
            {
              value: 6,
              label: "Form",
            },
            {
              value: 7,
              label: "Data",
            },
            {
              value: 8,
              label: "Notice",
            },
            {
              value: 9,
              label: "Navigation",
            },
            {
              value: 10,
              label: "Others",
            },
          ],
        },
      ],
    };
  },
  methods: {
    async cashoutDetail() {
      const { data, err } = await cashoutDetail({
        id: this.rowData.id,
      });
      if (err === 0) {
        console.log(data);
        this.row = data;
        if (this.row.token_no === "") {
          this.getCity();
        }
      }
    },
    async getCity() {
      const { data, err } = await getCity({});
      if (err === 0) {
        console.log(data);
        this.options = data;
      }
    },
    //绑定汇付信息
    async bandhfInfo() {
      const { data, err } = await bandhfInfo({
        id: this.row.id,
        card: this.row.card,
        province: this.positionId[0],
        city: this.positionId[1],
      });
      if (err === 0) {
        this.loading = false;
        this.$message({
          showClose: true,
          message: "操作成功！",
          type: "success",
        });
        this.$emit("handleClose");
      }
    },
    handleSubmit() {
      console.log(this.positionId);
      if (this.positionId.length === 0) {
        this.$message({
          showClose: true,
          message: "请选择省市",
          type: "warning",
        });
      } else {
        this.loading = true;
        this.bandhfInfo();
      }
    },
  },
  created() {
    this.cashoutDetail();
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  font-size: 13px;

  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
    span {
      color: red;
    }
  }
}
</style>
